import React from 'react';
import {Dimensions, Text, View, Image} from 'react-native';
import PropTypes from 'prop-types';
import {getStatusBarHeight} from "react-native-iphone-x-helper";

const WIN_WIDTH = Dimensions.get("window").width;
export default function CustomTopBar(props) {
  return <View style={[{
    height: Platform.OS === 'ios' ? (getStatusBarHeight(true) + 44) : (getStatusBarHeight(true) + 49),
    paddingTop: getStatusBarHeight(true),
    width: '100%',
    alignItems: 'stretch',
    borderBottomWidth: 0.5,
    borderBottomColor: props.borderBottomColor || '#eee',
    elevation:0,
    backgroundColor: props.backgroundColor
  }, props.headerStyle]}>
    {props.backgroundImage ? <Image source={props.backgroundImage} style={{position:'absolute', width:WIN_WIDTH, height:getStatusBarHeight(true)+44, backgroundColor:'yellow'}} resizeMode={'cover'}/>: null}
    <View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flex: 1}}>
      <View style={{flex:1}}>{props.headerLeft}</View>
      {props.headerTitle || <Text style={[{
        color: '#333',
        fontSize: 18,
        flex:2,
        textAlign:'center',
        fontFamily: 'HelveticaNeue-CondensedBold',
        fontWeight: 'bold'
      }, props.titleStyle]}>{props.title||''}</Text>}
      <View style={{flex:1, justifyContent:'flex-end', flexDirection:'row'}}>{props.headerRight}</View>
    </View>
  </View>;
}

CustomTopBar.propTypes = {
  headerStyle: PropTypes.object,
  title: PropTypes.string,
  borderBottomColor: PropTypes.string,
  headerLeft: PropTypes.object,
  headerTitle: PropTypes.object,
  titleStyle: PropTypes.object,
  headerRight: PropTypes.object,
  backgroundImage: PropTypes.number,
  backgroundColor: PropTypes.string
};

CustomTopBar.defaultProps = {};
